<template>
	<view class="">
		<tabsTop tabName="合美供销平台"></tabsTop>
		<view class="w-100" style="height:400rpx">
			<!-- #99 调接口返回的数据 -->
			<image :src="Domain_ICON+topdata.topImg" mode="" class="img"></image>
		</view>
		<!-- 是否有搜索框 -->
		<view class="" v-if="1">
				<mySearch class="searchClick" @click="searchClick()"></mySearch>
		</view>
		<!-- 是否有导航 -->
		<view class="bg-white">
			<view class="mx-1 pt-2 flex justify-between flex-wrap">
				<view style="width: 20%;" class="flex flex-column align-center" v-for="(item,index) in navArr"
					:key="index" @click="navClick(item.img)">
					<view class="" style="width:110rpx;height: 110rpx;">
						<image :src="Domain_IMGj+item.img" alt="" class="img">
						</image>
					</view>
					<view class="flex justify-center align-center py-3 mb-2" style="font-size: 25rpx;">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情图 -->
		<view class="flex flex-wrap" v-if="midImg.length>0">
			<view class="" style="width: 50%;height:300rpx" v-for="(item,index) in midImg">
				<image :src="Domain_IMGj+item" mode="" class="img"></image>
			</view>
		</view>
		<!-- 根据省份判读是否存在当前模块-->
		<view v-if="topdata.dizhi">
			<!-- 有省份显示省份模块 -->
			<view v-if="province.length>0" class="flex flex-wrap justify-between px-2" style="background-color: #ccc;">
				<!-- #99 调接口返回的数据 -->
				<view class="flex mt-3 justify-between align-center" v-for="(item,index) in province" :key="index"
					style="width:48% ;height:200rpx" @click="provinceClick(item,index)">
					<view class="left flex flex-column justify-center align-center">
						<text class="font-md font-weight-bolder mb-2">{{item}}</text>
						<view class="font-sm font-weight-bolder py px-2 rounded-lg" style="border:1px solid #000">
							点击进入
						</view>
					</view>
					<view class="" style="width: 130rpx;height:130rpx;">
						<!-- #99 调接口返回的数据 -->
						<image :src="Domain_ICON+proCityimg[index]" mode="" class="img rounded-circle"></image>
					</view>
				</view>
			</view>
			<!-- 有省有市显示的模块 -->
			<!-- 省市地址 -->
			<view class="flex flex-wrap justify-between px-2" style="background-color: #ccc;" v-else>
				<view class=" flex mt-3 justify-between align-center flex-shrink" v-for="(item,index) in proCity"
					:key="item" style="width: 48%; height:200rpx">
					<view class="left flex flex-column justify-center">
						<view class="">
							<text class="font-sm">{{item.pro}}</text><br>
							<text class="font-sm">{{item.city[index]}}</text>
						</view>
						<!-- <view class="flex justify-center align-center font font-weight-bolder px-2 rounded-circle mt-1" style="border:1px solid #000;width:40%">
							<text class="pl-1 mr-1">GO</text><uni-icons type="right" size="20"></uni-icons>
						</view> -->
					</view>
					<view class="" style="width: 130rpx;height:130rpx;">
						<!-- #99 调接口返回的数据 -->
						<image :src="Domain_ICON+proCityimg[index]" mode="" class="img rounded-circle"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品列表模块 -->
		<!-- botdata.length> -->
		<view class="product-list px-3 pt-1" style="background-color: #000;" v-if="goods.length>0">
			<view class="sign_row flex flex-wrap justify-between">
				<!-- 循环生成两个商品数据 -->
				<!-- #99 要改的参数 -->
				<view class="bg-white mb-3 rounded-lg overflow-hidden" v-for="(item,index) in goods" :key="index"
					style="width: 330rpx">
					<view class="w-100" style="height: 350rpx;">
						<image :src="Domain_ICON+item.img" :alt="item.name" class="img"></image>
					</view>
					<view class="px-2">
						<!-- 这行根据数据显示人气第几 -->
						<!-- <view class="product-name pt-2 font-sm"></view> -->
						<view class="flex justify-between py-3">
							<!-- 商品名 -->
							<view class="font-sm">
								{{item.name}}
							</view>
							<view class="flex justify-between mt-3">
								<!-- 商品价格 -->
								<view class="flex align-center align-center">
									<money :money="item.price"></money>
								</view>
								<!-- 马上抢 -->
								<view style="width: 40rpx; height: 40rpx;" @click="shopCart(item1)">
									<image :src="Domain_ICON+'/shopcart.png'" mode="" class="img" style="">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<botSponsor></botSponsor>
		<tabsBottom></tabsBottom>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	import {
		getHMGXLocation,
		getHMGXGoods
	} from "@/api/index.js"
	import mySearch  from "@/components/mysearch/mysearch.vue"
	export default {
		components: { //轮播图组件
			tabsTop,
			tabsBottom,
			botSponsor,
			mySearch
		},
		data() {
			return {
				Domain_ICON: app.globalData.Domain_ICON,
				Domain_IMGj:'../../static/icon',
				topdata: {}, // 顶部拿回来的数据
				botdata: [], // 底部拿回来的数据
				location: [], //地址
				province: [], //存放省份
				proCity: [], //存放省份+城市
				proCityimg: [], //省或省市的图片
				isSearch: false, // 判断是否有搜索框
				midImg: '', //  中间位置是否有商品详情图片，有就显示
				goods: [], // 商品
				navArr:[], // 导航
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				uni.request({
					url: 'http://127.0.0.1:5502/1.json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					success: (res) => {
						if(res){
							this.topdata = res.data.Data;
							this.province = this.topdata.dizhi.province
							this.proCityimg = this.topdata.dizhi.img;
							this.proCity = this.topdata.dizhi.proCity;
							this.midImg=this.topdata.midImg;
							this.navArr=this.topdata.navArr;
						}
						//console.log(this.proCity, '城');
					},
				})
				uni.request({
					url: 'http://127.0.0.1:5502/2.json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					success: (res) => {
						this.botdata = res.data.Data;
						this.goods = this.botdata;
						//console.log(this.goods);
					},
				})
			},
			provinceClick(name, index) {
				uni.navigateTo({
					url: "/pages/index/manygoods"
				})
			}
		}
	}
</script>

<style>
</style>